<script setup>
	import { getCurrentInstance, onMounted, computed, ref, defineEmits, defineProps } from "vue";
	import { ElMessage } from 'element-plus'
  import GeoJson from "@/assets/china_provinces.json";
	const { proxy } = getCurrentInstance();
  const formRef = ref(null)
  import { addMemberApplySkipReview } from '@/api/member/member.js'
  import { Plus } from '@element-plus/icons-vue'

  const prop = defineProps({
    visible: { type: Boolean, default: false },
  })
  const emit = defineEmits(['hideDialog'])
  const hideDialog = () => {
    emit('hideDialog')
  }

  const form = ref({
    applySource: 1, // 1、PC申请
    brand: '',
    contactsEmail: '',
    contactsMobile: '',
    contactsName: '',
    contactsPhone: '',
    contactsPosition: '',
    contactsQq: '',
    contactsWechat: '',
    corporationEmail: '',
    corporationMobile: '',
    corporationName: '',
    corporationPhone: '',
    corporationPosition: '',
    foundDate: null,
    invoicingAddr: '',
    invoicingBank: '',
    invoicingBlurb: '',
    invoicingCode: '',
    invoicingEnterpriseType:  1,
    invoicingFax: '',
    invoicingPhone: '',
    invoicingTax: '',
    invoicingUrl: '',
    joinType:  null,
    licenseFileIds: null,
    licenseFileUrl: null,
    mainBusiness: '',
    photoFileIds: null,
    directorFileUrl: null,
    postAddr: null,
    postArea: null,
    postCity: null,
    postProvince: null,
    productIntro: '',
    qualityCertification: '',
    registerAddr: null,
    registerArea: null,
    registerCity: null,
    registerProvince: null,
    registerCapital: '',
    unitName: ''
  })
  const businessData = ref({
    productCreate: [], // 产品生成
    productSell: [], // 产品销售
    productSum: [], // 系统集成
    productAlarm: [], // 报警运营
    technicalMid: [], // 技术中介
    technicalSci: [], // 科研单位
    training: [], // 培训机构
    iTService: [], //信息服务
    other: [], // 其他
  })

  const registerProvinceValidator = (rule, value) => {
    const { registerAddr, registerArea, registerCity, registerProvince} = form.value
    return !!(registerAddr && registerArea && registerCity && registerProvince) || new Error('请输入完整的注册地址')
  }
  const postProvinceValidator = (rule, value) => {
    const { postAddr, postArea, postCity, postProvince} = form.value
    return !!(postAddr && postArea && postCity && postProvince) || new Error('请输入完整的邮寄地址')
  }
  const registerCapitalValidator = (rule, value) => {
    if(value){
      return isNaN(value) ? new Error('注册资本必须为数字') : true
    }
    return new Error('请输入注册资本')
  }
  const rules = {
    joinType: { required: true, trigger: 'change', message: '请选择入会选项' },
    registerProvince: { required: true, trigger: 'change', validator: registerProvinceValidator },
    postProvince: { required: true, trigger: 'change', validator: postProvinceValidator },
    unitName: { required: true, message: '请输入单位名称', trigger: 'blur' },
    foundDate: { required: true, trigger: 'change', message: '请选择成立日期'},
    registerCapital: { required: true, trigger: 'blur', validator: registerCapitalValidator },
    corporationName: { required: true, message: '请输入法定代表姓名', trigger: 'blur' },
    contactsName: { required: true, message: '请输入联系人姓名', trigger: 'blur' },
    invoicingTax: { required: true, message: '请输入开票企业税号', trigger: 'blur' }
  }
    
  const joinTypeOptions = [
    { label: '注册地址', value: 1 }
  ]

  // 地址格式调整
  const formGeoData = (data) => {
    return data.map(item => {
      return {
        ...item,
        label: item.ssqname,
        value: item.ssqname
      }
    })
  }
  // 获取各级地址选项
  const regCityOption = computed(() => {
    const province = GeoJson.find(p => p.ssqname === form.value.registerProvince)
    form.value.registerCity = null
    return province?.city || []
  })
  const regAreaOption = computed(() => {
    const province = regCityOption.value.find(c => c.ssqname === form.value.registerCity)
    form.value.registerArea = null
    return province?.area || []
  })
  const postCityOption = computed(() => {
    const province = GeoJson.find(p => p.ssqname === form.value.postProvince)
    form.value.postCity = null
    return province?.city || []
  })
  const postAreaOption = computed(() => {
    const province = postCityOption.value.find(c => c.ssqname === form.value.postCity)
    form.value.postArea = null
    return province?.area || []
  })

  const createList = (list) => {
    return list.map(item => ({
      label: item,
      value: item
    }));
  }

  const productCreateList = [
    "入侵报警",
    '视频监控',
    '出入口控制',
    '实体防护',
    '防爆安检',
    '人体生物特征识别',
    '软件平台',
    '车辆防盗',
    '电子巡更',
    '其他',
  ]
  const productSumList = [
    '公安',
    '司法',
    '军工',
    '交通',
    '教育',
    '金融',
    '文博',
    '能源',
    '医疗',
    '社区',
    '其他'
  ]
  
  // 检测电话格式
  const checkPhone = (value) => {
    if (value) {
      const reg = /^1[3456789]\d{9}$/;
      return reg.test(value)
    }
    return true
  };

  
  // 图片上传
  const licenseRef = ref()
  const directorRef = ref()
  const licenseAction = import.meta.env.VITE_APP_BASE_API + "/member/addLicenseImg/noAuth";
  const directorAction = import.meta.env.VITE_APP_BASE_API + "/member/addPhotoImg/noAuth";
  // 图片尺寸检测
  const photoBeforeUpload = (file) => {
    let isRightSize = file.file.file.size / 1024 / 1024 < 5;
    if (!isRightSize) {
      ElMessage.error("文件大小超过 5MB");
    }
    return isRightSize;
  };
  // 图片清理
  const handleRemoveLicense = (file, fileList) => {
    form.value.licenseFileUrl = null;
    form.value.licenseFileIds = [];
    licenseRef.clearFiles();
  };
  const handleRemoveDirector = (file, fileList) => {
    form.value.directorFileUrl = null;
    form.value.photoFileIds = [];
    directorRef.clearFiles();
  };
  // 图片上传成功
  const uploadSuccessLicense = (response) => {
    if (response.code === 200) {
      form.value.licenseFileIds = response.data.id ? [response.data.id] : [];
      form.value.licenseFileUrl = response.data.accessUrl;
    } else {
      form.value.licenseFileIds = [];
      form.value.licenseFileUrl = null;
    }
  };
  const uploadSuccessDirector = (response) => {
    if (response.code === 200) {
      form.value.photoFileIds = response.data.id ? [response.data.id] : [];
      form.value.directorFileUrl = response.data.accessUrl;
    } else {
      form.value.photoFileIds = [];
      form.value.directorFileUrl = null;
    }
  };

  // 提交
  const submit = () => {
    console.log(form.value, businessData.value)
    const { contactsMobile, contactsPhone, corporationMobile, corporationPhone, invoicingPhone } = form.value
    if(!checkPhone(contactsMobile)){
      ElMessage.error("联系人手机号码格式不正确");
      return
    }
    if(!checkPhone(contactsPhone)){
      ElMessage.error("联系人电话号码格式不正确");
      return
    }
    if(!checkPhone(corporationMobile)){
      ElMessage.error("法定代表手机号码格式不正确");
      return
    }
    if(!checkPhone(corporationPhone)){
      ElMessage.error("法定代表电话号码格式不正确");
      return
    }
    if(!checkPhone(invoicingPhone)){
      ElMessage.error("开票信息电话号码格式不正确");
      return
    }
    formRef.value.validate(async (valid) => {
      if (valid) {
        const create = (businessData.value.productCreate || []).map(e => e+'(产品生产)')
        const sell = (businessData.value.productSell || []).map(e => e+'(产品销售)')
        const sum = (businessData.value.productSum || []).map(e => e+'(系统集成)')
        const alarm = (businessData.value.productAlarm || []).map(e => e+'(报警运营)')
        const { technicalMid, technicalSci, training, iTService, other } = businessData.value
        const mainBusiness = [
          ...create,
          ...sell,
          ...sum,
          ...alarm,
          ...technicalMid || [],
          ...technicalSci || [],
          ...training || [],
          ...iTService || [],
          ...other || []
        ].join(',')
        const res = await addMemberApplySkipReview({ ...form.value, mainBusiness })
        if(res.code === 200) {
          ElMessage.success('提交成功')
          hideDialog()
        }else{
          ElMessage.error('提交失败')
        }
        form.value = {
          applySource: 1, // 1、PC申请
          brand: '',
          contactsEmail: '',
          contactsMobile: '',
          contactsName: '',
          contactsPhone: '',
          contactsPosition: '',
          contactsQq: '',
          contactsWechat: '',
          corporationEmail: '',
          corporationMobile: '',
          corporationName: '',
          corporationPhone: '',
          corporationPosition: '',
          foundDate: null,
          invoicingAddr: '',
          invoicingBank: '',
          invoicingBlurb: '',
          invoicingCode: '',
          invoicingEnterpriseType:  1,
          invoicingFax: '',
          invoicingPhone: '',
          invoicingTax: '',
          invoicingUrl: '',
          joinType:  null,
          licenseFileIds: null,
          licenseFileUrl: null,
          mainBusiness: '',
          photoFileIds: null,
          directorFileUrl: null,
          postAddr: null,
          postArea: null,
          postCity: null,
          postProvince: null,
          productIntro: '',
          qualityCertification: '',
          registerAddr: null,
          registerArea: null,
          registerCity: null,
          registerProvince: null,
          registerCapital: '',
          unitName: ''
        }
        businessData.value = {
          productCreate: [],
          productSell: [],
          productSum: [],
          productAlarm: [],
          technicalMid: [],
          technicalSci: [],
          training: [],
          iTService: [],
          other: [],
        }
      }
    })
  }
</script>

<template>
  <el-dialog title="注册会员" v-model="prop.visible" :before-close="hideDialog" width="1400" align-center>
    <el-form class="dialog-ref" ref="formRef" label-width="80" :rules="rules" :model="form">
      <div class="left">
        <div class="section">
          <div class="title">企业基本信息</div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="入会选项" label-style="font-weight: bold" prop="joinType">
                <el-select v-model="form.joinType">
                  <el-option v-for="item in joinTypeOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注册地址" label-style="font-weight: bold" prop="registerProvince">
                <div class="flex">
                  <el-select class="geo-select" v-model="form.registerProvince">
                    <el-option v-for="item in formGeoData(GeoJson)" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-select class="geo-select" v-model="form.registerCity">
                    <el-option v-for="item in formGeoData(regCityOption)" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-select class="geo-select" v-model="form.registerArea">
                    <el-option v-for="item in formGeoData(regAreaOption)" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-input v-model="form.registerAddr" placeholder="详细地址"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="单位名称" label-style="font-weight: bold" prop="unitName">
                <el-input v-model="form.unitName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="邮寄地址" label-style="font-weight: bold" prop="postProvince">
                <div class="flex">
                  <el-select class="geo-select" v-model="form.postProvince">
                    <el-option v-for="item in formGeoData(GeoJson)" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-select class="geo-select" v-model="form.postCity">
                    <el-option v-for="item in formGeoData(postCityOption)" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-select class="geo-select" v-model="form.postArea">
                    <el-option v-for="item in formGeoData(postAreaOption)" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-input v-model="form.postAddr" placeholder="邮寄地址"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="成立日期" label-style="font-weight: bold" prop="foundDate">
                <el-date-picker style="width: 100%" v-model="form.foundDate"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册资本" label-style="font-weight: bold" prop="registerCapital">
                <el-input v-model="form.registerCapital">
                  <template #suffix>
                    <el-text italic>
                      万元
                    </el-text>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="section">
          <div class="title">法定代表情况</div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="姓名" label-style="font-weight: bold" prop="corporationName">
                <el-input v-model="form.corporationName" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职务" label-style="font-weight: bold">
                <el-input v-model="form.corporationPosition" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="电话号码" label-style="font-weight: bold">
                <el-input v-model="form.corporationPhone" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱" label-style="font-weight: bold">
                <el-input v-model="form.corporationEmail" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="手机号码" label-style="font-weight: bold">
                <el-input v-model="form.corporationMobile" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </div>

        <div class="section">
          <div class="title">联系人情况</div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="姓名" label-style="font-weight: bold" prop="contactsName">
                <el-input v-model="form.contactsName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职务" label-style="font-weight: bold">
                <el-input v-model="form.contactsPosition"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="电话号码" label-style="font-weight: bold">
                <el-input v-model="form.contactsPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱" label-style="font-weight: bold">
                <el-input v-model="form.contactsEmail"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="手机号码" label-style="font-weight: bold">
                <el-input v-model="form.contactsMobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ号" label-style="font-weight: bold">
                <el-input v-model="form.contactsQq"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="微信号" label-style="font-weight: bold">
                <el-input v-model="form.contactsWechat"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </div>

        <div class="section">
          <div class="title">开票信息情况</div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="企业税号" label-style="font-weight: bold" prop="invoicingTax">
                <el-input v-model="form.invoicingTax"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" label-style="font-weight: bold">
                <el-input v-model="form.invoicingPhone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="地址" label-style="font-weight: bold">
                <el-input v-model="form.invoicingAddr"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行" label-style="font-weight: bold">
                <el-input v-model="form.invoicingBank"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="开票代码" label-style="font-weight: bold">
                <el-input v-model="form.invoicingCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="网址" label-style="font-weight: bold">
                <el-input v-model="form.invoicingUrl"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="传真号码" label-style="font-weight: bold">
                <el-input v-model="form.invoicingFax"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业类型" label-style="font-weight: bold">
                <el-radio-group v-model="form.invoicingEnterpriseType">
                  <el-radio :label="1">上市公司</el-radio>
                  <el-radio :label="2">非上市公司</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="企业简介" label-style="font-weight: bold">
                <el-input
                  v-model="form.invoicingBlurb"
                  type="textarea"
                  placeholder="不超过500字符"
                  maxlength="500"
                  show-count
                  :autosize="{ minRows: 5 }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </div>
      </div>
      <div class="right">
        <div class="title">主营范围</div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品生产" label-style="font-weight: bold; padding-bottom: 15px;">
              <el-checkbox-group v-model="businessData.productCreate" style="width: 100%">
                <el-checkbox v-for="item in productCreateList" :label="item"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品销售" label-style="font-weight: bold; padding-bottom: 15px;">
              <el-checkbox-group v-model="businessData.productSell" style="width: 100%">
                <el-checkbox v-for="item in productCreateList" :label="item"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="系统集成" label-style="font-weight: bold; padding-bottom: 15px;">
              <el-checkbox-group v-model="businessData.productSum" style="width: 100%">
                <el-checkbox v-for="item in productSumList" :label="item"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="报警运营" label-style="font-weight: bold; padding-bottom: 15px;">
              <el-checkbox-group v-model="businessData.productAlarm" style="width: 100%">
                <el-checkbox v-for="item in productSumList" :label="item"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="技术中介" label-style="font-weight: bold;">
              <el-checkbox-group v-model="businessData.technicalMid" style="width: 100%">
                <el-checkbox v-for="item in ['技术中介']" :label="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="科研单位" label-style="font-weight: bold;">
              <el-checkbox-group v-model="businessData.technicalSci" style="width: 100%">
                <el-checkbox v-for="item in ['科研单位']" :label="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="培训机构" label-style="font-weight: bold;">
              <el-checkbox-group v-model="businessData.training" style="width: 100%">
                <el-checkbox v-for="item in ['培训机构']" :label="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="信息服务" label-style="font-weight: bold;">
              <el-checkbox-group v-model="businessData.iTService" style="width: 100%;">
                <el-checkbox v-for="item in ['信息服务']" :label="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="其他" label-style="font-weight: bold;">
              <el-checkbox-group v-model="businessData.other" style="width: 100%">
                <el-checkbox v-for="item in ['其他']" :label="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品品牌" label-style="font-weight: bold">
              <el-input v-model="form.brand"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="label-title">主要产品名称及性能</div>
            <el-form-item label-style="font-weight: bold" label-width="0">
              <el-input v-model="form.productIntro" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="label-title">质量保证体系认证</div>
            <el-form-item label-style="font-weight: bold" label-width="0">
              <el-input v-model="form.qualityCertification" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="营业执照" label-style="font-weight: bold">
              <el-upload
						    v-if="!form.licenseFileUrl"
                ref="licenseRef"
                :show-file-list="false"
                :action="licenseAction"
                list-type="picture-card"
                :on-preview="photoBeforeUpload"
                :on-remove="handleRemoveLicense"
                :on-success="uploadSuccessLicense"
                accept=".jpg,.jpeg,.png"
								:limit="1">
                <template #trigger>
									<el-icon><Plus /></el-icon>
								</template>
							</el-upload>
              <div class="card-box" v-else>
                <el-image
                  class="card-img"
                  :src="form.licenseFileUrl"
                  fit="contain"
                  width="100%"
                />
                <div class="clear-btn" @click="handleRemoveLicense">删除图片</div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="负责人照片" label-style="font-weight: bold" label-width="fit-content">
              <el-upload
						    v-if="!form.directorFileUrl"
                ref="directorRef"
                :show-file-list="false"
                :action="directorAction"
                list-type="picture-card"
                :on-preview="photoBeforeUpload"
                :on-remove="handleRemoveDirector"
                :on-success="uploadSuccessDirector"
                accept=".jpg,.jpeg,.png"
								:limit="1">
                
                <template #trigger>
									<el-icon><Plus /></el-icon>
								</template>
							</el-upload>
              <div class="card-box" v-else>
                <el-image
                  class="card-img"
                  :src="form.directorFileUrl"
                  fit="contain"
                  width="100%"
                />
                <div class="clear-btn" @click="handleRemoveDirector">删除图片</div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">提交注册</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
  .dialog-ref{
    display: flex;
    .left{
      width: 50%;
      padding-right: 20px;
      box-sizing: border-box;
      border-right: 1px solid #eee;
      height: 650px;
      overflow-y: auto;
    }
    .right{
      width: 50%;
      padding-left: 20px;
      box-sizing: border-box;
      height: 650px;
      overflow-y: auto;
    }
    .title{
      font-weight: bold;
      font-size: 16px;
      margin: 10px 0;
    }
    .flex{
      display: flex;
      .geo-select{
        flex-shrink: 0;
        width: 16%;
      }
      >.el-input{
        width: 52%;
      }
    }
    .label-title{
      font-weight: bold;
      line-height: 32px;
      color: #606266;
    }
  }
  
	.card-box{
		position: relative;
	}
	.card-img{
		width: 360px;
	}
	.clear-btn{
		width: 90px;
		height: 30px;
		display: flex;
		font-weight: normal;
		font-size: 15px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #ffffff;
		background-color: gray;
		position: absolute;
		right: 30px;
		bottom: 30px;
	}
</style>